<template>
  <div class="content" v-if="info">
      <div class="result-info-box">
          <p><span>恭喜您下单成功</span><span class="logistics-state">待发货</span></p>
          <p>订单编号：{{info.order_no}}</p>
      </div>
      <div class="order-info-box">
          <div class="count-box">
              <p>商品数量：{{info.num}}</p>
              <p>总计：{{info.scores}}积分</p>
          </div>
          <div class="address-info-box">
            <p><span>{{info.receiver}}</span><span>{{info.receiver_tel}}</span></p>
            <p>{{info.area + info.address}}</p>
          </div>
      </div>
      <div class="goods-info-box">
        <div class="goods-cover-box">
          <img :src="info.goods_pic" :alt="info.goods_name">
        </div>
        <div class="goods-description-box">
          <h5>{{info.goods_name}}</h5>
          <p><span>兑换积分：<span class="credits">{{info.goods_scores}}分</span></span><span class="origin-price">￥{{info.goods_price}}</span><span class="shipping">{{parseFloat(info.freight)? '运费：'+info.freight : '免运费'}}</span></p>
        </div>
        <div class="goods-intro-box" v-html="info.goods_info"></div>
      </div>
      <div class="button-box">
        <router-link to="/mall" replace>返回积分商城</router-link>
      </div>
  </div>
</template>
<script>
import { apiPost } from 'src/common/api.js'
export default {
  name: "order-result",
  data() {
    return {
      info:null
    };
  },
  mounted() {
    this.getOrderInfo()
  },
  methods: {
    getOrderInfo() {
      apiPost('order_success',{'order_id':this.$route.params.id}).then((res)=>{
        if(res.status === 0){
            this.info = res.data
          }else{
            console.log(res.msg)
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.result-info-box{
  margin-bottom: 10px;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  p{
    display: flex;
    justify-content: space-between;
    .logistics-state{
      color: #ff5a5a;
    }
  }
}
.order-info-box{
  margin-bottom: 10px;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  .count-box{
    padding-bottom: 5px;
    border-bottom: 1px solid #d2d2d2;
  }
  .address-info-box{
    margin-top: 5px;
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.goods-info-box{
  border-bottom: 1px solid #d2d2d2;
  background: #fff;
  .goods-cover-box {
    img {
      width: 100%;
      height: 73.33vw;
      object-fit: cover;
    }
  }
  .goods-description-box {
    margin: 10px 15px;
    background: #fff;
    h5 {
      font-size: 15px;
      font-weight: 400;
    }
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      .credits {
        color: #ff5a5a;
      }
      .origin-price {
        text-decoration: line-through;
      }
    }
  }
  .goods-intro-box {
    padding-top: 10px;
    margin: 10px 15px;
    border-top:1px solid #d2d2d2;
  }
}
.button-box {
    padding: 15px 20px 25px;
    a{
      display: inline-block;
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #78d041;
    }
  }


</style>


